<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位于相对定位的区别</title>
    <style type="text/css">
    div{
        width: 80px;
        height: 100px;
        background-color: orange;
        margin: 5px;
    }
        /*默认定位*/
        #div1{
            position: static;
            left: 100px;
            top: 100px;

        }
        /*相对定位relative*/
        #div2{
            position: relative;
            left: 200px;
            top: 200px;
        }
        /*绝对定位*/
        #div3{
        position: absolute;
        left: 300px;
        top: 300px;
        }
        /*固定定位*/
       #div4{
        position: fixed;
        left: 400px;
        top: 400px;
    }

    </style>
</head>
<body>
<div id="div1">
    div1
</div>
<div id="div2">
    div2
</div>
<div id="div3">
    div3
</div>
<div id="div4">
    div4
</div>
<div id="div5">
    div5
</div>
</body>
</html>